<template>
    <div class="content-box">
        <div class="content-box-name">{{name}}</div>
        <div class="content-box-desc">{{desc}}</div>
        
        <example :edata="edata[0]"><example0 slot="case"/></example>
        
        
        
        <div class='api' v-if="API">
        <div class="tab-title">API</div>
        <div class="tab-desc" v-if="API.props">{{name}} props</div>
        <div  v-if="API.props" v-html="API_props"></div>
        <div class="tab-desc" v-if="API.events">{{name}} events</div>
        <div  v-if="API.events" v-html="API_events"></div>
        <div class="tab-desc" v-if="API.slots">{{name}} slots</div>
        <div v-if="API.slots" v-html="API_slots"></div>
        <div class="tab-desc" v-if="API.options">{{name}} options</div>
        <div v-if="API.options" v-html="API_options"></div>
        <div class="tab-desc" v-if="API.rules">{{name}} rules</div>
        <div v-if="API.rules" v-html="API_rules"></div>
        </div>
        
    </div>
</template>
<script>
    
      import example0 from "./ex-scrollx.vue"
    
    var API;
    
      API={"props":["注意：rx-scrollx|写在滚动的元素上！！！ 可以写最小宽度，也可以不写，不写时，会计算元素的宽度|Number|0"],"events":["reset|重置滚动条，界面有变化时都需要调用该方法|"],"slots":[" slot|全部内容"]}
      for (const i in API) {
      if (API.hasOwnProperty(i)) {
        const p = API[i];
        const sp ='-|'
        switch (i) {
          case 'props':
            p.unshift(sp.repeat(4))
            p.unshift('属性|说明|类型|默认值')
            break;
          case 'events':
            p.unshift(sp.repeat(3))
            p.unshift('事件名|说明|返回值')
            break;
          case 'slots':
            p.unshift(sp.repeat(2))
            p.unshift('名称|说明')
            break;
          case 'options':
            p.unshift(sp.repeat(4))
            p.unshift('属性|说明|类型|默认值')
            break;
          case 'rules':
            p.unshift(sp.repeat(3))
            p.unshift('规则|类型|说明')
            break;
        }
      }
    }
    

    export default {
        data(){
            return {
                name:'scrollx',
                desc:'遵循尽可能不出现横向滚动条的用户体验原则，1、局部横向滚动；2、横向滚动固定在底部，不会随着纵向滚动变动2。',
                intro:'',
                edata:[{"path":"./ex-scrollx.vue","title":"入门","readme":"%60%60"}],
                API:API
            }
        },
        computed:{
          API_props(){
            return marked(this.API.props.join('\n'))
          },
          API_events(){
            return marked(this.API.events.join('\n'))
          },
          API_slots(){
            return marked(this.API.slots.join('\n'))
          },
          API_options(){
            return marked(this.API.options.join('\n'))
          },
          API_rules(){
            return marked(this.API.rules.join('\n'))
          },
          introMd(){
             return this.intro?marked(decodeURIComponent(this.intro)):''
          }
        },
        components:{
            
            example0,
            
        }
    }
</script>
<style>
.content-box{
    padding: 20px 25px;
  }
.content-box-name{
    font-size: 26px;
    font-weight: 400;
    margin: 12px 0; 
  }
.content-box-desc{
  margin: 10px;
    font-size: 14px;
}
.tab-title{
  font-size:20px;
  font-weight: 400;
   margin: 8px 0; 
}
.tab-desc{
  font-size:16px;
  padding-bottom: 10px;
}
</style>
